<template>
  <div class="home">
    <el-header>
    {{localStorage.user}}丨<span @click="loginOut">退出</span>
    </el-header>
    <el-container>
      <el-aside width="200px">

        <!-- 导航开始 -->
         <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
         
          <div v-for="item in nav" :key="item.index">
            <el-submenu v-if="item.sub.length"  :index="item.index" >
              <template slot="title">
                <i :class="item.icon"></i><span>{{item.title}}</span>
              </template>
              <el-menu-item @click="jumpUrl(k.path,item.title+' / '+k.name)" v-for="k in item.sub" :index="k.index" :key="k.index">{{k.name}}</el-menu-item>
            </el-submenu>

            <el-menu-item  @click="jumpUrl(item.path,item.title)" v-else  :index="item.index">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </div>
         


        </el-menu>
        <!-- 导航结束 -->
      </el-aside>
      <el-main>
        <el-breadcrumb>
          <el-breadcrumb-item >{{breadcrumb.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 二级路由视图 -->
         <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>

export default {
  data(){
    return {
      defaultActive:'1',
      breadcrumb:{
          name:'工作台'
        }
        ,
      nav:[
        {
            index:'1',
            icon:'el-icon-menu',
            title:'工作台',
            path:'/work',
            sub:[]
        },
        {
            index:'2',
            icon:'el-icon-user-solid',
            title:'用户信息',
            path:'/userlist',
            sub:[]
        },
        {
            index:'3',
            icon:'el-icon-time',
            title:'预约订单',
            path:'/orderlist',
            sub:[]
        },
        {
            index:'4',
            icon:'el-icon-reading',
            title:'健康上报',
            path:'/healthlist',
            sub:[]
        },
        {
            index:'5',
            icon:'el-icon-office-building',
            title:'门店管理',
            path:'',
            sub:[
              {
                  name:'门店列表',
                  index:'5-1',
                  path:'/shoplist'
              },
               {
                  name:'录入门店',
                  index:'5-2',
                  path:'/shopadd'
              }
            ]
        },
         {
            index:'6',
            icon:'el-icon-s-tools',
            title:'系统账号设置',
            path:'/setadmin',
            sub:[]
        },
      ]
    }
  },
  mounted(){
      this.nav.forEach(item=>{
          if(item.path === this.$route.path){
            this.defaultActive = item.index
            this.breadcrumb.name = item.title
            return 
          }
          item.sub.forEach(jtem=>{
              if(jtem.path === this.$route.path){
                  this.defaultActive = jtem.index
                  this.breadcrumb.name = item.title+' / '+ jtem.name
              }
          })
      })
  },
  methods:{
    // 退出
    loginOut(){
        this.$httpAxios(this.$api.ADMIN_LOGIN_OUT(),res=>{
          localStorage.clear()
          this.$router.push('/login')
        })  
    },
    // 路由跳转
    jumpUrl(path,name){
        this.breadcrumb = {name}
        this.$router.push(path)
    }
  }
}
</script>

<style scoped>

  .el-header{
    width: 100vw;
    background: #539EB7;
    position: fixed;
    top:0;
    color: #fff;
    text-align: right;
    padding: 0 20px;
    line-height: 60px;
  }
    
  .el-container {
    height: 100vh;
    padding-top: 60px;
    box-sizing: border-box;
  }
  .el-aside {
    height: 100%;
    background-color: #D3DCE6;
    line-height: 200px;
  }
  
  .el-main {
    height: 100%;
    background-color: #fff;
    color: #333;
    overflow: scroll;
  }
.el-breadcrumb{
  margin-bottom: 15px;
}

</style>
